{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="{% static '/css/login.css' %}">
    <script src="{% static '/js/jquery-1.11.3/jquery.min.js' %}"></script>

</head>
<body bgcolor="#EEE">

<div id="content">
    <form action="{% url 'App:login' %}" method="post">
        {% csrf_token %}
        <div class="box">
            <div class="tittle"><h1 align="center">登录页</h1></div>
            <div class="input_box">
                用户名： <input name="uname" id="uname" type="text" placeholder="请输入您的账户">
            </div>
            <div class="input_box">
                密码： <input name="upassword" id="upass" type="password" placeholder="请输入您的密码">
            </div>
            <div class="input_box yz">
                验证码：<input type="text" name="yzmcode">
            <img src="{% url 'App:getcode' %}" id="datacode" alt=""></div>
            {#    手机验证码#}
            <div class="input_box">
                手机号：<input type="text" name="phone" id="phone"> <br>
            </div>
            <div class="input_box phone">
            手机验证码：<input type="text" name="sms">
            <input type="button" value="获取验证码" id="yzm">
                </div>
            <div class="button">
                <button>登录</button>
            </div>
            <div class="input_tep last">
                <h4 align="center"><a href="{% url 'App:register' %}">没有账号？点我啊</a></h4>
            </div>

        </div>
    </form>
</div>
<script>

    {#    给验证码添加点击事件#}
    var mycode = document.getElementById('datacode')
    mycode.onclick = function () {
        {#    每次再去请求这个函数#}
        mycode.src = "{% url 'App:getcode' %}?" + Math.random()
    }

    {#    手机验证码#}
    var time = 3
    var timer
    $("#yzm").click(function () {
        var _this = this  //获取当前的按钮对象
        this.disabled = true  //禁止点击
        timer = setInterval(function () {
            {#时间减１#}
            time--
            _this.value = '' + time + "后再获取"
            if (time < 1) {
                _this.disabled = false
                _this.value = '获取验证码'
                clearInterval(timer)
                timer = null
            }

        }, 1000)

        value = $("#phone").val()
        $.get("{% url 'App:sendyzm' %}", {'phone': value}, function (data) {
            console.log(data)
        }, 'json')
    })
</script>
</body>
</html>